<template>
  <div class="content">
    <div class="item" @click="backToIndex">返回主页</div>
    |
    <div class="item" @click="aboutUs">关于我们</div>
    |
    <div class="item" @click="connectUs">联系我们</div>
    |
    <div class="item" @click="logout">退出登录</div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  methods: {
    async logout() {
      // 清除cookie，删除登录态
      this.$_cookie.delCookie('user');
      this.$_cookie.delCookie('selectedKey');
      const res = await this.$_api.logOut();
      const msg = res.data.message;
      switch(msg){
        case '成功':
          this.$message.success("成功退出登录！");
          this.$router.push("/Login");
          localStorage.removeItem("accessToken")
          break;
        default:
          this.$message.error("退出登录失败，请重试！");
      }
    },
    backToIndex() {},
    aboutUs() {
      this.$router.push("/ERR404");
    },
    connectUs() {
      this.$router.push("/ERR500");
    },
  },
};
</script>
<style scoped>
.content {
  background: #045bac;
  width: 100%;
  height: 70px;
  color: white;

  /* 居中对齐 */
  display: flex;
  /* 实现水平居中 */
  justify-content: center;
  /* 实现垂直居中 */
  align-items: center;
}

.item {
  display: inline-block;
  padding: 0 5px;
  cursor: pointer;
}
.item:hover {
  text-decoration: underline;
}
</style>
